<template>
  <el-dialog
      :model-value="addDialogVisible"
      title="考场信息添加"
      width="50%"
      draggable
      center
      @close="handleClose"
  >
    <el-form ref="addfrom" :model="form" label-width="100px" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="考场编号：" prop="id">
            <el-input v-model="form.id" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="考试场地：" prop="place">
            <el-input v-model="form.place" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="限制人数：" prop="peoplelimit">
            <el-input v-model="form.peoplelimit" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="约考人数：" prop="peoplecurrent">
            <el-input v-model="form.peoplecurrent" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="考试科目：" prop="subject">
            <el-select v-model="form.subject" clearable placeholder=" ">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开始时间：" prop="date">
            <el-date-picker
                v-model="form.date"
                type="datetime"
                placeholder=" "
                format="YYYY/MM/DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleCommit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref} from "vue";
import {ElMessage} from "element-plus";
import {InsertExam} from "@/api/exam";
//获取父组件方法或传值
const props = defineProps({
  initGetStudents:{
    type:Function,
    required:true
  }
})

//科目options值
const options=[
  {
    value:'科目一',
    label:'科目一'
  },
  {
    value:'科目二',
    label:'科目二'
  },
  {
    value:'科目三',
    label:'科目三'
  },
  {
    value:'科目四',
    label:'科目四'
  }
]
//初始化表单
const form = ref({})
const rules =ref({
  id:[
    { required: true, message: '请输入考场编号', trigger: 'blur' }
  ],
  place:[
    { required: true, message: '请输入考试场地', trigger: 'blur' }
  ],
  subject:[
    { required: true, message: '请输入考试科目', trigger: 'blur' }
  ],
  date:[
    { required: true, message: '请输入开始时间', trigger: 'blur' }
  ],
  peoplelimit:[
    { required: true, message: '请输入人数限制', trigger: 'blur' }
  ],
  peoplecurrent:[
    { required: true, message: '请输入约考人数', trigger: 'blur' }
  ]
})
const Emits=defineEmits(['update:modelValue'])

const handleClose=()=>{
  Emits('update:modelValue',false)
}
const addfrom=ref(null)
//添加
const handleCommit=()=>{
  console.log(form.value.date)
  addfrom.value.validate(async (valid) => {
    if (valid) {
      await InsertExam(form.value).then(res=>{
        if(res.code===20011){
          ElMessage({
            message: '添加成功',
            type: 'success',
          })
        }else {
          ElMessage({
            message: '编号已存在',
            type: 'error',
          })
        }
        props.initGetStudents()
        addfrom.value.resetFields()
      }).catch(err=>{
        ElMessage({
          message: err,
          type: 'error',
        })
        addfrom.value.resetFields()
      })
    } else {
      console.log('error submit!')
    }
  })
  handleClose()
}
</script>

<style scoped>

</style>